<template>
  <div class="SK-user-center-wallet-container">
    <div class="SK-wallet-info">
      <h1>我的钱包<span></span></h1>
      <div class="content">
        <span class="num">{{ userInfo.money }}</span
        ><span class="coin">果币</span
        ><button class="activation" @click="recharge">立即充值</button>
      </div>
    </div>
    <div class="SK-wallet-list">
      <div class="SK-form-block-wrap" :model="accountForm">
        <div class="form-input">
          <label class="label-elm">手机号码：</label>
          <div class="area-block">{{ userInfo.phone }}</div>
        </div>
        <div class="form-input">
          <label class="label-elm">银行卡卡号：</label>
          <div>
            <input
              class="input-text"
              type="text"
              v-model="accountForm.card"
              id="card"
              name="card"
              placeholder="请输入卡号"
              :class="{ invalid: errors.has('card') }"
              v-validate="{ required: true }"
            />
            <span class="error-msg">{{ errors.first("card") }}</span>
          </div>
        </div>
        <div class="form-input">
          <label class="label-elm">充值金额：</label>
          <div>
            <input
              class="input-text"
              type="text"
              placeholder="请输入金额"
              v-model="accountForm.addcount"
              id="addcount"
              name="addcount"
              :class="{ invalid: errors.has('addcount') }"
              v-validate="{
                required: true,
                regex: /^[1-9]|[1-9][0-9]*$/ || /^([1-9]+(\.\d+)?|0\.\d+)$/,
              }"
            />
            <span class="error-msg">{{ errors.first("account") }}</span>
            <!-- account只可以正浮点数 -->
          </div>
        </div>
        <div class="form-input">
          <label class="label-elm">输入密码：</label>
          <div>
            <input
              class="input-text"
              type="password"
              placeholder="请输入密码"
              v-model="cardPass"
              id="cardPass"
              name="cardPass"
              :class="{ invalid: errors.has('cardPass') }"
              v-validate="{ required: true, regex: /^\d{6}$/ }"
            />
            <span class="error-msg">{{ errors.first("cardPass") }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="SK-wallet-list">
      <div class="SK-title-block-container">
        <div class="SK-title-block-title">
          <span>充值记录</span>
        </div>
        <div class="SK-title-block-content" v-if="myDeposit == null">
          <div class="empty-remind-word">最近没有充值哦~~</div>
        </div>
        <el-table :data="myDeposit" style="width: 100%" v-else>
          <el-table-column prop="id" label="充值编号" width="180">
          </el-table-column>
          <el-table-column prop="addcount" label="充值金额" width="180">
          </el-table-column>
          <el-table-column prop="card" label="充值卡号"> </el-table-column>
          <el-table-column prop="time" label="充值时间"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Wallet",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
      loginForm:{
        name:'',
        password:''
      },
      accountForm: { username: "", addcount: 0, card: "" },
      cardPass: "",
    };
  },

  mounted() {
    this.getUserInfo();
    this.getMyDeposit();
  },
  methods: {
    getUserInfo() {
      //   this.pic = require("@/asset/image/default.jpeg");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.accountForm.username = this.userInfo.name;
      this.loginForm.name=this.userInfo.name;
      this.loginForm.password=this.userInfo.password;
    },
    async getUserMoney(){
      
    },
    async recharge() {
      const success = await this.$validator.validateAll();
      if (success) {
        try {
          await this.$store.dispatch("addMoney", this.accountForm);
          this.userInfo.money =
            this.userInfo.money + parseFloat(this.accountForm.addcount);
          this.getMyDeposit();
          localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        } catch (error) {
          alert(error.message);
        }
      }
    },
    async getMyDeposit() {
      try {
        await this.$store.dispatch("getDeposit", this.userInfo.name);
      } catch (error) {
        alert(error.message);
      }
    },
  },
  computed: {
    ...mapState({
      myDeposit: (state) => state.user.myDeposit,
    }),
  },
};
</script>

<style>
@import "../../../assets/css/wallet.css";
</style>
